<template>
	<view class="page">
		<view class="header">
			<yzh-header :title="'活动发布'" :bgColor="'#FADAC3'"></yzh-header>
			<!-- #ifdef MP-WEIXIN -->
			<image src="@/static/yzh/cat2.jpg"></image>
			<!-- #endif -->
		</view>
		<view class="body">
			<uni-card>
				<view class="content">
					<u--form v-model="form" :model="form" ref="form">
						<u-form-item label="标题" prop="title" :labelWidth="80">
							<u--input v-model="form.title" placeholder="请输入标题" border="surround"
								shape="circle"></u--input>
						</u-form-item>
						<u-form-item label="内容" prop="content" :labelWidth="80">
							<u--textarea placeholder="请输入内容" v-model="form.content"></u--textarea>
						</u-form-item>
						<u-form-item label="图片" prop="image" :labelWidth="80">
							<u-upload :fileList="imageList" @afterRead="ARImage" @delete="deleteImage" :maxCount="1"
								:previewFullImage="true"></u-upload>
						</u-form-item>
					</u--form>
				</view>
			</uni-card>
			<view class="btn">
				<u-button type="primary" text="发布活动" @click="confirm"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from "@/components/Header/Header.vue";
	import form from "../../../uni_modules/uview-ui/libs/config/props/form";
	export default {
		components: {
			'yzh-header': Header
		},
		data() {
			return {
				form: {
					title: "",
					content: "",
					image: ""
				},
				rules: {
					title: [{
						type: "string",
						required: true,
						message: "请输入标题",
						trigger: ["blur", "change"]
					}],
					content: [{
						type: "string",
						required: true,
						message: "请输入内容",
						trigger: ["blur", "change"]
					}],
					image: [{
						required: true,
						message: "请上传图片",
						trigger: ["blur", "change"]
					}]
				},
				imageList: null
			}
		},
		methods: {
			deleteImage() {
				this.imageList = null;
			},
			ARImage() {

			},
			confirm() {
				this.$refs.form.validate().then(res => {
					console.log('表单验证通过', res);
					// 提交表单数据...
					console.log(this.form)
				}).catch(err => {
					console.log('表单验证失败', err);
				});

			}
		},
		onLoad() {
			this.$refs.form.setRules(this.rules);
		}
	}
</script>

<style scoped>
	.page {
		/* #ifndef MP-WEIXIN */
		background-image: url('@/static/yzh/cat2.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 100vh;
		/* #endif */
	}

	.header {}

	.header>image {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
		object-fit: fill;
	}

	.body {
		position: relative;
		margin-top: 20%;
	}
</style>